<!-- 单个照片样式 -->
<template>
  <div class="item" ref="itemRef" :data-id="photoData.id">
    <a-image class="avatar" width="85" height="85" :src="photoData.photo" />
    <h3
      style="border-bottom: 1px solid #00a3ff; color: #00a3ff"
      @click="goDetail(photoData.id)"
    >
      {{ photoData.name }}
    </h3>
    <div>职位</div>
    <div>工号</div>
    <!-- <div>{{ photoData.position }}</div>
    <div>{{ photoData.num }}</div> -->
    <div class="hover-item" v-if="isShowDetail" ref="hoverItemRef">
      <header><h3>部门负责人信息</h3></header>
      <!-- 分隔线 -->
      <hr />
      <div class="hover-item-content">
        <section>
          <div>
            <!-- 工号:  -->
            {{ photoDetail?.num ? photoDetail.num : '暂无工号' }}
          </div>
          <!-- <div>{{ photoDetail?.num ? photoDetail.num : '--' }}</div> -->
        </section>
        <section v-show="selectData.includes(5)">
          <div>
            <!-- 职级:  -->
            {{ photoDetail?.level ? photoDetail.level : '暂无职级' }}
          </div>
          <!-- <div>{{ photoDetail?.level ? photoDetail.level : '--' }}</div> -->
        </section>
        <section>
          <div>
            <!-- 所属公司:  -->
            {{ photoDetail?.company ? photoDetail.company : '暂无公司' }}
          </div>
          <!-- <div>{{ photoDetail?.company ? photoDetail.company : '--' }}</div> -->
        </section>
        <section v-show="selectData.includes(4)">
          <div>
            <!-- 所属部门: -->
            {{ photoDetail?.department ? photoDetail.department : '暂无部门' }}
          </div>
          <!-- <div>
            {{ photoDetail?.department ? photoDetail.department : '--' }}
          </div> -->
        </section>
        <section>
          <div>
            <!-- 入职日期:  -->
            {{ photoDetail?.time ? photoDetail.time : '暂无入职日期' }}
          </div>
          <!-- <div>{{ photoDetail?.time ? photoDetail.time : '--' }}</div> -->
        </section>
        <section v-show="selectData.includes(6)">
          <div>
            <!-- 手机号码: -->
            {{ photoDetail?.phone ? photoDetail.phone : '暂无手机号码' }}
          </div>
          <!-- <div>{{ photoDetail?.phone ? photoDetail.phone : '--' }}</div> -->
        </section>
        <section v-show="selectData.includes(8)">
          <div>
            <!-- 工作电话: -->
            {{
              photoDetail?.workPhone ? photoDetail.workPhone : '暂无工作电话'
            }}
          </div>
          <!-- <div>{{ photoDetail?.workPhone ? photoDetail.workPhone : '--' }}</div> -->
        </section>
        <section v-show="selectData.includes(7)">
          <div>
            <!-- 工作邮箱: -->
            {{ photoDetail?.email ? photoDetail.email : '暂无工作邮箱' }}
          </div>
          <!-- <div>{{ photoDetail?.email ? photoDetail.email : '--' }}</div> -->
        </section>
        <section>
          <div>
            <!-- 员工类型: -->
            {{ photoDetail?.type ? photoDetail.type : '暂无员工类型' }}
          </div>
          <!-- <div>{{ photoDetail?.type ? photoDetail.type : '--' }}</div> -->
        </section>
        <section v-show="selectData.includes(9)">
          <div>
            <!-- 工作地点: -->
            {{ photoDetail?.place ? photoDetail.place : '暂无作地点' }}
          </div>
          <!-- <div>{{ photoDetail?.place ? photoDetail.place : '--' }}</div> -->
        </section>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { GetPhotoWallDetail } from '@/apis/management/organization/organizationManagement';
const props = withDefaults(
  // 参数说明
  defineProps<{
    photoData: any; // 单个照片数据
    selectData: number[];
  }>(),
  {}
);
const router = useRouter();
let itemRef = ref();
let hoverItemRef = ref();
let currId = ref(0); // 储存移入照片对应的id
let photoDetail = ref(); // 照片详情
let isShowDetail = ref(false);
let scheduled: any; // 定时任务

const peopleDetailsArr = new Map(); // 存储人员详情,用来缓存已经请求过的数据
onMounted(() => {
  itemRef.value.addEventListener('mouseenter', async () => {
    showDetail();
  });

  itemRef.value.addEventListener('click', async () => {
    showDetail(true);
  });

  itemRef.value.addEventListener('mouseleave', () => {
    hideDetail();
  });
});

/**
 * 显示详情
 * isClick 是否是点击事件， 默认不是点击事件
 */
const showDetail = async (isClick = false) => {
  const getData = async () => {
    currId.value = +itemRef.value.dataset.id;
    if (peopleDetailsArr.has(currId.value)) {
      photoDetail.value = peopleDetailsArr.get(currId.value);
      isShowDetail.value = true;
      return;
    } else {
      const res = await GetPhotoWallDetail({
        id: currId.value
      });
      photoDetail.value = res;
      peopleDetailsArr.set(currId.value, res);
      isShowDetail.value = true;
    }
  };

  // 判断详情显示的位置，如果超出屏幕的右侧,则显示在左侧
  const showLocation = () => {
    const itemRect = itemRef.value.getBoundingClientRect();
    if (itemRect.right + hoverItemRef.value.offsetWidth > 1800) {
      hoverItemRef.value.style.left = 'auto';
      hoverItemRef.value.style.right = '0';
    }
  };

  if (isClick) {
    await getData();
    showLocation();
  } else {
    // 鼠标移入一秒后才发生下面事件
    scheduled = setTimeout(async () => {
      await getData();
      showLocation();
    }, 1000);
  }
};

// 隐藏详情
const hideDetail = () => {
  clearTimeout(scheduled);
  isShowDetail.value = false;
};

// 点击头像前往人员档案详情
const goDetail = (id: number) => {
  router.push({
    name: 'HumanRosterDetail',
    query: {
      id
    }
  });
};
</script>

<style scoped lang="less">
.item {
  position: relative;
  width: 175px;
  height: 226px;
  border: 1px solid #ccc;
  padding: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .avatar {
    border-radius: 50%;
  }

  &:hover {
    cursor: pointer;
    transform: translateY(-10px);
    background-color: #eee;
    z-index: 99;
  }

  .hover-item {
    position: absolute;
    z-index: 999 !important;
    width: 300px;
    height: 230px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #fff;

    left: 100px;
    top: 100px;
    // color: #fff;
    header {
      margin: 0;
      padding: 0;
      padding: 0 5px;
      font-weight: 700;
      background-color: #417eef;
      padding: 10px;
      h3 {
        margin: 0;
        color: #fff;
      }
    }

    hr {
      color: #fff;
      margin-top: 0;
    }

    // 栅格布局(两列并且平均分配)
    &-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      section div:first-child {
        margin-bottom: 10px;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
      }
    }
  }
}
</style>
